<template>
  <div class="initiate">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>发起流程</span>
      </div>
      <el-col :span="18" :offset="3">
        <div class="form-conf">
          <v-form-render
            :key="new Date().getTime()"
            :form-data="{}"
            :option-data="{}"
            @submit="submit"
            ref="parser"
            @getData="getData"
          ></v-form-render>
        </div>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import { getProcessForm, startProcess } from "@/api/workflow/process";
/**
 * 此界面用以【发起】任务提交
 */

export default {
  name: "Initiate",
  data() {
    return {
      definitionId: null,
      deployId: null,
      procInsId: null,
      formJson: {
        formRef: "elForm",
        formModel: "formData",
        size: "medium",
        labelPosition: "right",
        labelWidth: 100,
        formRules: "rules",
        gutter: 15,
        disabled: false,
        span: 24,
        formBtns: true,
        unFocusedComponentBorder: false,
        fields: [
          {
            __config__: {
              label: "标题",
              labelWidth: null,
              showLabel: true,
              changeTag: true,
              tag: "el-input",
              tagIcon: "input",
              required: true,
              layout: "colFormItem",
              span: 24,
              document: "https://element.eleme.cn/#/zh-CN/component/input",
              regList: [],
              formId: 101,
              renderKey: "1011715390207760",
            },
            __slot__: { prepend: "", append: "" },
            placeholder: "简短概括",
            style: { width: "100%" },
            clearable: true,
            "prefix-icon": "",
            "suffix-icon": "",
            maxlength: null,
            "show-word-limit": false,
            readonly: false,
            disabled: false,
            __vModel__: "title",
          },
          {
            __config__: {
              label: "原因",
              labelWidth: null,
              showLabel: true,
              tag: "el-input",
              tagIcon: "textarea",
              required: true,
              layout: "colFormItem",
              span: 24,
              regList: [],
              changeTag: true,
              document: "https://element.eleme.cn/#/zh-CN/component/input",
              formId: 102,
              renderKey: "1021715390208926",
            },
            type: "textarea",
            placeholder: "请输入原因",
            autosize: { minRows: 4, maxRows: 4 },
            style: { width: "100%" },
            maxlength: null,
            "show-word-limit": false,
            readonly: false,
            disabled: false,
            __vModel__: "reason",
          },
          {
            __config__: {
              label: "请假天数",
              showLabel: true,
              changeTag: true,
              labelWidth: null,
              tag: "el-input-number",
              tagIcon: "number",
              defaultValue: 1,
              span: 24,
              layout: "colFormItem",
              required: true,
              regList: [],
              document:
                "https://element.eleme.cn/#/zh-CN/component/input-number",
              formId: 103,
              renderKey: "1031715390351893",
            },
            placeholder: "请假天数",
            min: 1,
            max: 365,
            step: 1,
            "step-strictly": false,
            "controls-position": "",
            disabled: false,
            __vModel__: "leaveDay",
          },
          {
            __config__: {
              label: "请假类型",
              labelWidth: null,
              showLabel: true,
              tag: "el-radio-group",
              tagIcon: "radio",
              changeTag: true,
              defaultValue: 1,
              layout: "colFormItem",
              span: 24,
              optionType: "default",
              regList: [],
              required: true,
              border: false,
              document: "https://element.eleme.cn/#/zh-CN/component/radio",
              formId: 104,
              renderKey: "1041715390404159",
            },
            __slot__: {
              options: [
                { label: "事假", value: 1 },
                { label: "婚假", value: 2 },
                { label: "不开心假", value: 3 },
              ],
            },
            style: {},
            size: "medium",
            disabled: false,
            __vModel__: "leaveType",
          },
        ],
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.deployId = this.$route.params && this.$route.params.deployId;
      this.definitionId = this.$route.query && this.$route.query.definitionId;
      this.procInsId = this.$route.query && this.$route.query.procInsId;
      getProcessForm({
        definitionId: this.definitionId,
        deployId: this.deployId,
        procInsId: this.procInsId,
      }).then((res) => {
        if (res.data) {
          this.$refs["parser"].setFormJson(this.formJson);
          console.log(this.$refs["parser"]);
          console.log(this.$refs.parser.getFormJson());
        }
      });
    },
    /** 接收子组件传的值 */
    getData(data) {
      if (data) {
        const variables = [];
        data.fields.forEach((item) => {
          let variableData = {};
          variableData.label = item.__config__.label;
          // 表单值为多个选项时
          if (item.__config__.defaultValue instanceof Array) {
            const array = [];
            item.__config__.defaultValue.forEach((val) => {
              array.push(val);
            });
            variableData.val = array;
          } else {
            variableData.val = item.__config__.defaultValue;
          }
          variables.push(variableData);
        });
        this.variables = variables;
      }
    },
    submit(data) {
      if (data && this.definitionId) {
        // 启动流程并将表单数据加入流程变量
        startProcess(this.definitionId, JSON.stringify(data.valData)).then(
          (res) => {
            this.$modal.msgSuccess(res.msg);
            this.$tab.closeOpenPage({
              path: "/work/own",
            });
          }
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
.initiate {
  padding: 10px;
  .form-conf {
    margin: 15px auto;
    width: 80%;
    padding: 15px;
  }
}
</style>
